<header id="top">
    <div class="wrapper">
        <a href="{{ site.baseurl }}/" class="brand">{{ site.title }}</a>
        <small>{{site.brief-intro}}</small>
        <button id="headerMenu" class="menu"><i class="fa fa-bars"></i></button>
        <nav id="headerNav">
            <ul>
                <li>
                    {% if page.url == '/' %}
                    <a class="active" href="{{site.baseurl}}/">
                        {% else %}
                    <a href="{{site.baseurl}}/">
                    {% endif %}
                        <i class="fa fa-home"></i>Home
                    </a>
                </li>

                {% for my_page in site.pages %}
                    {% if my_page.type == 'page' %}
                    <li>
                        {% if my_page.url == page.url %}
                        <a class="active" href="{{ my_page.url | prepend: site.baseurl }}">
                            {% else %}
                        <a href="{{ my_page.url | prepend: site.baseurl }}">
                        {% endif %}
                            <i class="fa fa-{{my_page.icon}}"></i>{{ my_page.title }}
                        </a>
                    </li>
                    {% endif %}
                {% endfor %}
            </ul>
        </nav>
    </div>
</header>
